<template>
  <div class="page">
    <div class="search" style="text-align: left">
      <span>select</span>
      <el-cascader v-model="_cascader" :options="cascaderData" @change="queryDatas"></el-cascader>
      <span>Date:</span>
      <el-date-picker @change="(days = '1'), queryDatas()" v-model="date" type="month" value-format="yyyy-MM" placeholder="选择月份"> </el-date-picker>
      <el-button :loading="loading1 || loading2" type="warning" style="margin-left:10px" @click="queryDatas()">搜索</el-button>
    </div>
    <div class="card">
      <el-scrollbar class="height">
        <LabelBox>
          <span slot="left">NOK Gear boxes</span>
          <span slot="right">{{ date }}</span>
        </LabelBox>
        <div
          style="height: 200px; width: calc(100% - 10px)"
          v-loading="loading1"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(247 247 248)"
        >
          <ChartBlock ref="NOK_Gear_boxes" @click="char_click"></ChartBlock>
        </div>
        <LabelBox style="margin-top: 20px">
          <span slot="left"># Gearboxes</span>
          <span slot="right">{{ date }}</span>
        </LabelBox>
        <div
          style="height: 200px; width: calc(100% - 10px)"
          v-loading="loading1"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(247 247 248)"
        >
          <ChartBlock ref="Gearboxes" @click="char_click"></ChartBlock>
        </div>
        <LabelBox style="margin-top: 20px">
          <span slot="left">Test No</span>
          <span slot="center">Measurement cycles (only up to 6 visible){{ date + "-" + days }}</span>
        </LabelBox>
        <div class="progressChartBox" v-loading="loading2" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(247 247 248)">
          <div class="progressChart">
            <div class="labels">
              <p>1</p>
              <p>2</p>
              <p></p>
            </div>
            <div class="contents">
              <div class="progressBox">
                <el-progress :text-inside="true" :stroke-width="20" :percentage="datas.firstTime ? Math.floor(datas.firstTime * 10000) / 100 : 0" status="exception"></el-progress>
              </div>
              <div class="progressBox">
                <el-progress :text-inside="true" :stroke-width="20" :percentage="datas.lastTime ? Math.floor(datas.lastTime * 10000) / 100 : 0" status="exception"></el-progress>
              </div>
              <div class="progressBox coordinate">
                <div v-for="(item, index) in coordinate" :key="index">
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-row :gutter="10" class="AlgorithmRow">
          <el-col :span="15">
            <LabelBox style="margin-top: 20px">
              <span slot="left">Algorithm {{ date + "-" + days }} (Top 20)</span>
            </LabelBox>
            <div
              style="height: 500px; border-right: 5px solid #eee"
              v-loading="loading2"
              element-loading-text="加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(247 247 248)"
            >
              <ChartBlock ref="ProgressChart" @click="ProgressChart_click"></ChartBlock>
            </div>
          </el-col>
          <el-col :span="9">
            <LabelBox style="margin-top: 20px">
              <span slot="left">Process Waring {{ date + "-" + days }}</span>
            </LabelBox>
            <div style="height: 500px" v-loading="loading2" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(247 247 248)">
              <ChartBlock ref="ProcessWaring"></ChartBlock>
            </div>
          </el-col>
        </el-row>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import charts from "@/components/charts.js";
export default {
  name: "MonthAnalysis",
  data() {
    return {
      inputValue: "asd",
      loading1: false,
      loading2: false,

      coordinate: ["0%", "10%", "20%", "30%", "40%", "50%", "60%", "70%", "80%", "90%", "100%"],

      datas: {},
      date: this.getTime("date"),
      days: this.getTime("day"),
      typeno: "",
      lineno: "",
      stationno: "",
      cascaderData: [],
    };
  },
  computed: {
    _cascader: {
      get() {
        return [this.typeno, this.lineno, this.stationno];
      },
      set(val) {
        if (val.length) {
          this.typeno = val[0];
          this.lineno = val[1];
          this.stationno = val[2];
        }
      },
    },
  },
  mounted() {
    if (JSON.parse(localStorage.getItem("cascaderData"))) {
      this.cascaderData = JSON.parse(localStorage.getItem("cascaderData"));
      this.formter();
      this.queryDatas();
    } else {
      this.$http
        .request({
          url: "api/TILT/selectGroupBy",
          method: "GET",
          showLoading: true,
        })
        .then((resp) => {
          if (resp.status == 100) {
            this.cascaderData = resp.data;
            localStorage.setItem("cascaderData", JSON.stringify(this.cascaderData));
            this.formter();
            this.queryDatas();
          }
        });
    }
  },
  methods: {
    formter() {
      let Datas = [];
      this.cascaderData.forEach((product) => {
        if (!this.typeno) this.typeno = product.product;
        let p = {
          value: product.product,
          label: product.product,
          children: [],
        };
        product.lines.forEach((line) => {
          if (!this.lineno) this.lineno = line.lineNo;
          let l = {
            value: line.lineNo,
            label: line.lineNo,
            children: [],
          };
          line.stations.forEach((station) => {
            if (!this.stationno) this.stationno = station.station;
            l.children.push({ value: station.station, label: station.station });
          });
          p.children.push(l);
        });
        Datas.push(p);
      });
      this.cascaderData = Datas;
      if (this.$route.params && typeof this.$route.params.typeno != "undefined") {
        this.typeno = this.$route.params.typeno;
        this.lineno = this.$route.params.lineno;
        this.stationno = this.$route.params.stationno;
      }
    },
    queryDatas() {
      this.getNOK_Gear_boxes();
      this.getChartsData("18");
    },
    getNOK_Gear_boxes() {
      this.loading1 = true;
      this.$http
        .request({
          url: "api/Foreigner/selectTwo",
          method: "GET",
          params: {
            // name: this.typeno,
            // lineno: this.lineno,
            // stationno: this.stationno,
            // date: this.date,
            name: "AdientHA3000P002",
            lineno: "2",
            stationno: "1",
            date: "2020-06-04",
          },
        })
        .then((resp) => {
          this.loading1 = false;
          if (resp.status == 100) {
            let date = [];
            let _Gearboxes = [];
            let _NOK_Gear_boxes = [];
            resp.data.forEach((element) => {
              date.push(element.days);
              _Gearboxes.push(element.num);
              _NOK_Gear_boxes.push(Math.floor(element.percentage * 10000) / 100);
            });
            charts.Gearboxes.xAxis.data = date;
            charts.NOK_Gear_boxes.xAxis.data = date;
            charts.Gearboxes.series[0].data = _Gearboxes;
            charts.NOK_Gear_boxes.series[0].data = _NOK_Gear_boxes;
            this.$refs.NOK_Gear_boxes.setOption(charts.NOK_Gear_boxes);
            this.$refs.Gearboxes.setOption(charts.Gearboxes);
          }
        })
        .catch(() => {
          this.loading1 = false;
        });
    },
    char_click(params) {
      window.hlight = params.name;
      this.$refs.NOK_Gear_boxes.setOption(charts.NOK_Gear_boxes);
      this.$refs.Gearboxes.setOption(charts.Gearboxes);
      this.days = params.name;
      this.getChartsData();
    },
    getChartsData() {
      this.loading2 = true;
      this.$http
        .request({
          url: "api/Foreigner/selectN1N30",
          method: "GET",
          params: {
            // name: this.typeno,
            // lineno: this.lineno,
            // stationno: this.stationno,
            // date: this.date + "-" + this.days,
            name: "AdientHA3000P002",
            lineno: "2",
            stationno: "1",
            date: "2020-06-04",
          },
        })
        .then((resp) => {
          this.loading2 = false;
          if (resp.status == 100) {
            this.datas = resp.data;
            let p_y = []
            let p_s = []
            let _outTime1 = Object.keys(this.datas.outTime1);
            _outTime1.forEach((item) => {
              p_y.push(item)
              p_s.push(Math.floor(this.datas.outTime1[item] * 10000) / 100)
            });
            charts.ProcessWaring.yAxis.data = p_y;
            charts.ProcessWaring.series[0].data = p_s;

            this.$refs.ProcessWaring.setOption(charts.ProcessWaring);
            let _ProgressChart = [];
            let objArr = Object.keys(this.datas.tiltDatasavePO);
            objArr.forEach((item) => {
              _ProgressChart.push({
                name: item,
                value: this.datas.tiltDatasavePO[item],
              });
            });
            for (let i = 0; i < _ProgressChart.length - 1; i++) {
              for (let j = 0; j < _ProgressChart.length - 1 - i; j++) {
                if (_ProgressChart[j].value < _ProgressChart[j + 1].value) {
                  let temp = _ProgressChart[j];
                  _ProgressChart[j] = _ProgressChart[j + 1];
                  _ProgressChart[j + 1] = temp;
                }
              }
            }
            let yAxis = [];
            let series = [];
            for (let i = 0; i < 20; i++) {
              if (_ProgressChart.length >= i) {
                yAxis.unshift(_ProgressChart[i].name);
                series.unshift(Math.floor(_ProgressChart[i].value * 10000) / 100);
              }
            }
            charts.ProgressChart.yAxis.data = yAxis;
            charts.ProgressChart.series[0].data = series;
            this.$refs.ProgressChart.setOption(charts.ProgressChart);
          }
        })
        .catch(() => {
          this.loading2 = false;
        });
    },
    ProgressChart_click(params) {
      this.$router.push({
        path: '/algorithm',
        query:{
          nx: params.name,
          cascaderArray: this._cascader,
          date: `${this.date}-${this.days}`,
        }
      })
    },
    getTime(type) {
      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      if (type == "date") {
        return y + "-" + m;
      }
      if (type == "day") {
        return d;
      }
      return y + "-" + m + "-" + d;
    },
  },
};
</script>
<style lang="scss">
.el-cascader {
  width: 250px;
  .el-input {
    width: 100% !important;
  }
}
</style>
